let app = getApp()

// 工具栏
import utils from '../../../utils/util.js';

// 阳历日期转为农历日期
var date2Lunar = require('../../../utils/date2Lunar.js');

// 引入uCharts
import uCharts from '../../../utils/u-charts.min.js';

let canvaLineA = null;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    barMarginTop: '16',
    barHeight: '52',
    barWidth: '0',
    scrollHeight: '',
    wuxing: '',
    wuxingData: {},
    colorSetting: {
      name: '',
      textColor: '',
      subTextColor: '',
      bgColor: '',
      linear: '',
      shadow: '',
      cover01: '',
      cover02: '',
    },
    topInfo: {
      monthDate: '',
      lunarMonth: '',
      lunarHour: '',
      weather: ''
    },
    topBoxData: {
      shouldBe: {
        text: '宜修养生息',
        content: '主荣华富贵，即所谓的“登科进禄”，遇之命吉。天厨乃天之贵神，入命，男人内才、外才皆优秀，才德兼备，风云遇合，高居鼎鼐。'
      },
      notShouldBe: {
        text: '忌打卡上班',
        content: '勿做情绪不稳，冲动易怒，缺乏仔细、认真。性格容易孤僻而固执，飘泊，而六亲不依。'
      }
    },
    middleBoxData: {
      luckyColor: [],
      luckyNum: '',
      luckyPostion: ''
    },
    circleLucky: {
      score: 90,
      colorStart: '#c5fefb',
      colorEnd: '#81c8ff',
      bgColor: '#D1E6FA'
    },
    luckyData: [
      {title: '爱情', score: 88, color: 'linear-gradient(270deg, #73BCFF 0%, #C7FFFC 100%);', bgColor: '#D1E6FA'},
      {title: '事业', score: 74, color: 'linear-gradient(270deg, #73BCFF 0%, #C7FFFC 100%);', bgColor: '#D1E6FA'},
      {title: '财富', score: 66, color: 'linear-gradient(270deg, #73BCFF 0%, #C7FFFC 100%);', bgColor: '#D1E6FA'},
    ],
    cWidth: 280,
    cHeight: 140,
    chartData: {
      categories: ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戊', '亥'], 
      series: [
        {
          name: '运势',
          data: [56, 30, 58, 45, 95, 12, 87, 88, 36, 52, 71, 66]
        }
      ]
    },
    chartImg: '', // 储存canvas转化的图片
    canvasVisible: true, // 控制canvas与图片的交叉显示
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getBarHeight()
    this.setListHeight()
    this.getWuxing()

    this.progressView2 = this.selectComponent("#progressView2");
    this.progressView2.drawProgressBar(this.data.circleLucky.score, 100); //绘制环形进度
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // this.getWuxing()

    // this.progressView2 = this.selectComponent("#progressView2");
    // this.progressView2.drawProgressBar(this.data.circleLucky.score, 100); //绘制环形进度
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},

  /**
   * 设置导航栏高度
   */
  getBarHeight() {
    let systemInfo = wx.getSystemInfoSync()
    let	statusBarHeight = systemInfo.statusBarHeight
    let menu = wx.getMenuButtonBoundingClientRect()

    let	barMarginTop = menu.top
    let	barHeight = menu.height + 10
    let barWidth = systemInfo.windowWidth - (systemInfo.windowWidth - menu.right + menu.width)

    this.setData({
      barMarginTop: barMarginTop,
      barHeight: barHeight,
      barWidth: barWidth
    })
  },

  /**
   * 设置scroll-view高度
   */
  setListHeight() {
    let systemInfo = wx.getSystemInfoSync(),
      rpx = systemInfo.windowWidth / 750, // 计算rpx
      hei = parseInt(this.data.barMarginTop) + parseInt(this.data.barHeight) + 4,
      tapHeight = Math.floor(rpx * hei * 2), // tap高度
      scrollHeight = systemInfo.windowHeight - tapHeight; // swiper高度
    this.setData({
      scrollHeight
    });
  },

  getWuxing() {
    let _this = this
    let wuxing = app.getTodayLucky()
    _this.setData({
      wuxing: wuxing.wuxing,
      wuxingData: wuxing,
      canvasVisible: true
    })
    _this.setColor()
    _this.getDate()
    _this.setPageData()
    _this.initChart()
    setTimeout(function(){ _this.saveImage() }, 2000)
  },
  setColor() {
    let _this = this
    let wuxing = this.data.wuxing
    let curColor = {}
    let colorSetting = [
      {
        name: '金',
        textColor: '#111',
        subTextColor: '#F3DD18',
        bgColor: '#FFF2C2',
        linear: 'linear-gradient(90deg, #FFF2C2 0%, #FFF6D6 100%)',
        shadow: '-10rpx -10rpx 32rpx rgba(255, 255, 255, 0.7), 4rpx 4rpx 40rpx rgba(245, 192, 112, 0.4), inset 1rpx 1rpx 2rpx rgba(255, 255, 255, 0.6), inset -1rpx -1rpx 2rpx rgba(255, 255, 255, 0.5)',
        cover01: 'linear-gradient(180deg, rgba(255, 245, 206, 0.3) 0%, #FFF3C3 100%), linear-gradient(90deg, rgba(255, 244, 200, 0.8) 0%, rgba(255, 243, 195, 0.8) 100%)',
        cover02: 'linear-gradient(180deg, rgba(255, 245, 206, 0.3) 0%, #FFF3C3 100%), linear-gradient(90deg, rgba(255, 244, 200, 0.86) 0%, rgba(255, 243, 195, 0.86) 100%)',
      },
      {
        name: '木',
        textColor: '#111',
        subTextColor: '#58BE93',
        bgColor: '#E3F9F1',
        linear: 'linear-gradient(90deg, #D4FBEB 0%, #E3FFF3 100%)',
        shadow: '-10rpx -10rpx 32rpx rgba(255, 255, 255, 0.7), 4rpx 4rpx 40rpx rgba(157, 235, 206, 0.4), inset 1rpx 1rpx 2rpx rgba(255, 255, 255, 0.6), inset -1rpx -1rpx 2rpx rgba(255, 255, 255, 0.5)',
        cover01: 'linear-gradient(180deg, rgba(213, 252, 236, 0.3) 0%, #D5FCEC 100%), linear-gradient(90deg, rgba(213, 252, 236, 0.8) 0%, rgba(228, 255, 244, 0.8) 100%)',
        cover02: 'linear-gradient(180deg, rgba(227, 255, 244, 0.3) 0%, #E4FFF4 100%), linear-gradient(90deg, rgba(212, 251, 235, 0.86) 0%, rgba(227, 255, 243, 0.86) 100%)',
      },
      {
        name: '水',
        textColor: '#111',
        subTextColor: '#93B1D0',
        bgColor: '#E3EEF9',
        linear: 'linear-gradient(90deg, #D9ECFF 0%, #E3EEF9 100%)',
        shadow: '-10rpx -10rpx 32rpx rgba(255, 255, 255, 0.7), 4rpx 4rpx 40rpx #B9D3EC, inset 1rpx 1rpx 2rpx rgba(255, 255, 255, 0.6), inset -1rpx -1rpx 2rpx rgba(255, 255, 255, 0.5)',
        cover01: 'linear-gradient(180deg, rgba(223, 238, 252, 0) 0%, rgba(223, 238, 252, 0.8) 100%), linear-gradient(90deg, rgba(221, 237, 254, 0.8) 0%, rgba(227, 238, 249, 0.8) 100%)',
        cover02: 'linear-gradient(180deg, rgba(223, 238, 252, 0.3) 0%, #DFEEFC 100%), linear-gradient(90deg, rgba(221, 237, 254, 0.86) 0%, rgba(227, 238, 249, 0.86) 100%)',
      },
      {
        name: '火',
        textColor: '#111',
        subTextColor: '#EE7A7A',
        bgColor: '#F9E3E3',
        linear: 'linear-gradient(90deg, #F9E5E5 0%, #FBF0EE 100%)',
        shadow: '-10rpx -10rpx 32rpx rgba(255, 255, 255, 0.7), 4rpx 4rpx 40rpx rgba(220, 191, 191, 0.4), inset 1rpx 1rpx 2rpx rgba(255, 255, 255, 0.6), inset -1rpx -1rpx 2rpx rgba(255, 255, 255, 0.5)',
        cover01: 'linear-gradient(180deg, rgba(250, 230, 230, 0.3) 0%, #FAE6E6 100%), linear-gradient(90deg, rgba(250, 230, 230, 0.8) 0%, rgba(251, 240, 238, 0.8) 100%)',
        cover02: 'linear-gradient(180deg, rgba(250, 230, 230, 0.3) 0%, #FAE6E6 100%), linear-gradient(90deg, rgba(250, 230, 230, 0.86) 0%, rgba(251, 240, 238, 0.86) 100%)',
      },
      {
        name: '土',
        textColor: '#111',
        subTextColor: '#F5CA8A',
        bgColor: '#F8F0E1',
        linear: 'linear-gradient(90deg, #F8F0E1 0%, #FFF8EB 100%)',
        shadow: '-10rpx -10rpx 32rpx rgba(255, 255, 255, 0.7), 4rpx 4rpx 40rpx rgba(232, 217, 188, 0.4), inset 1rpx 1rpx 2rpx rgba(255, 255, 255, 0.6), inset -1rpx -1rpx 2rpx rgba(255, 255, 255, 0.5)',
        cover01: 'linear-gradient(180deg, rgba(255, 249, 235, 0.3) 0%, #F9F1E2 100%), linear-gradient(90deg, rgba(249, 241, 226, 0.8) 0%, rgba(249, 241, 226, 0.8) 100%)',
        cover02: 'linear-gradient(180deg, rgba(255, 249, 235, 0.3) 0%, #F9F1E2 100%), linear-gradient(90deg, rgba(249, 241, 226, 0.86) 0%, rgba(249, 241, 226, 0.86) 100%)',
      },
    ]
    colorSetting.forEach((item, index) => {
      if(item.name === wuxing) {
        curColor = item
      }
    })
    _this.setData({
      colorSetting: curColor
    })
  },
  getDate() {
    let date = new Date()
    let solarDate = ('0' + (date.getMonth() + 1)).slice(-2) + '月' + ('0' + (date.getDate())).slice(-2) + '日'
    let lunarObj = date2Lunar.sloarToLunar(date.getFullYear(), date.getMonth() + 1, date.getDate())
    let lunarDate = lunarObj.lunarMonth + lunarObj.lunarDay
    let lunarTime = utils.time2Lunar()
    let topInfo = {}
    topInfo.monthDate = solarDate
    topInfo.lunarMonth = lunarDate
    topInfo.lunarHour = lunarTime
    topInfo.weather = ''
    this.setData({
      topInfo
    })
  },
  setPageData() {
    let data = this.data.wuxingData
    let middleBoxData = {}
    middleBoxData.luckyColor = data.colorList
    middleBoxData.luckyNum = data.luckyNum
    middleBoxData.luckyPostion = data.luckyDirection
    let chartData = {
      categories: ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戊', '亥'], 
      series: [
        {
          name: '运势',
          data: []
        }
      ]
    }
    chartData.series[0].data = data.hourList
    this.setData({
      middleBoxData,
      chartData
    })
  },
  initChart() {
    let _this = this
    let canvasId = 'luckyChart'
    let chartData = _this.data.chartData
    let color = [_this.data.colorSetting.subTextColor]
    // const query = wx.createSelectorQuery()
    // query.select('#' + canvasId)
    // .fields({node: true, size: true})
    // .exec((res) => {
    //   const canvas = res[0].node
    //   const ctx = canvas.getContext('2d')
    //   canvas.width = res[0].width * 1
    //   canvas.height = res[0].height * 1
    // })
    canvaLineA = new uCharts({
      canvasId: canvasId,
      type: 'line',
      fontSize: 11,
      legend: true,
      // context: ctx,
      // canvas2d: true,
      // pixelRatio: 1,
      dataLabel: true,
      dataPointShape: true,
      background: '#FFFFFF',
      pixelRatio: 1,
      categories: chartData.categories,
      series: chartData.series,
      animation: true,
      padding: [4, 15, 4, 0],
      colors: color,
      // enableScroll: true,//开启图表拖拽功能
      xAxis: {
        disableGrid: true,
        type: 'grid',
        gridType: 'dash',
        itemCount: 4,
        scrollShow: true,
        scrollAlign: 'left',
        //scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF
        //scrollColor:'#DEE7F7',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6
      },
      yAxis: {
        disabled: false,
        disableGrid: true,
        gridType: 'dash',
        splitNumber: 5,
        min: 0,
        max: 110,
        axisLine: false,
        format: (val) => { return '' }//如不写此方法，Y轴刻度默认保留两位小数
      },
      legend: {
        show: false
      },
      width: _this.data.cWidth,
      height: _this.data.cHeight,
      extra: {
        line: {
          type: 'straight'
        }
      },
    });
  },
  /**
   * saveImage  用于解决canvas层级过高问题
   * 将canvas保存为图片, 显示图片而不显示canvas
   */
  saveImage() {
    let _this =this
    let canvasId = 'luckyChart'
    wx.canvasToTempFilePath({
      canvasId: canvasId,
      success(res) {
        _this.setData({
          chartImg: res.tempFilePath,
          canvasVisible: false
        })
      }
    })
  },
  checkShouldBeDetails() {
    let wuxing = this.data.wuxing
    wx.navigateTo({
      url: '/lunarCalendarPack/pages/lunarCalendar/shouldBeDetails/index?wuxing=' + wuxing,
    })
  },
  goIndex() {
    wx.navigateBack({
      delta: 0,
      fail: function() {
        wx.navigateTo({
          url: '/pages/index/index',
        })
      }
    })
  },

  bindDownLoad() {},
})